<template>
	<view class="content submitC">
		<view class="submit-info1 boxS">
			<view class="info1-item flex-between">
				<view class="info1-left font30">
					<text class="info-default">*</text>
					<text>部门</text>
				</view>
				<view class="info1-right">
					{{userInfo.ou_name}}
				</view>
			</view>
			<view class="info1-item flex-between">
				<view class="info1-left">
					<text class="info-default">*</text>
					<text>申请人姓名</text>
				</view>
				<view class="info1-right">
					{{userInfo.user_name}}
				</view>
			</view>
			<view class="info1-item">
				<view class="info1-left">
					<text class="info-default">*</text>
					<text>出差事由</text>
				</view>
				<view class="info1-right">
					<textarea class="font28" :value="textShiyou" data-type="shiyou" @input="inputText"
						placeholder="请输入出差事由" />
				</view>
			</view>
		</view>
		<view class="submit-info2 boxS">
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>开始时间</text>
				</view>
				<view class="info2-right flex-right" @tap="openTime('start')">
					<text :style="startTime!=''?'color:#000':''">{{startTime!=''?startTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>结束时间</text>
				</view>
				<view class="info2-right flex-right" @tap="openTime('end')">
					<text :style="endTime!=''?'color:#000':''">{{endTime!=''?endTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<picker class="info2-item" @change="bindPickerChange" range-key="name" :value="index" :range="personList">
				<view class="flex-between">
					<view class="info2-left">
						<text class="info-default"></text>
						<text>接替人姓名</text>
					</view>
					<view class="info2-right flex-right">
						<text :style="name!=''?'color:#000':''">{{name!=''?name:'请选择'}}</text>
						<image src="../../static/img/more-ico2.png" mode=""></image>
					</view>
				</view>
			</picker>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>时长 (天)</text>
				</view>
				<view class="info2-right flex-right">
					<input type="text" :value="calTime" :disabled="true" placeholder="选择时间后自动计算" />
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>出发城市</text>
				</view>
				<view class="info2-right flex-right" @tap="openCity('start')">
					<text :style="startCity!=''?'color:#000':''">{{startCity!=''?startCity:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>目的城市</text>
				</view>
				<view class="info2-right flex-right" @tap="openCity('end')">
					<text :style="endCity!=''?'color:#000':''">{{endCity!=''?endCity:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>填写同行人</text>
				</view>
				<view class="info2-right flex-right">
					<input type="text" :value="textRenshu" @input="inputText" data-type="renshu"
						placeholder="填写同行人姓名" />
				</view>
			</view>

			<view class="info2-item">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>公差备注</text>
				</view>
				<view class="info2-right flex-right" style="width: 100%;">
					<textarea :value="textBeizu" @input="inputText" data-type="beizu" placeholder="请输入公差备注"
						style="color: #000000;" />
				</view>
			</view>
		</view>

		<view class="submit-info3 boxS" style="padding-right: 20%;">
			<uni-file-picker limit="3" title="(最多可上传3张)" :auto-upload="false" @select="select" @progress="progress"
				@delete="deletes" />
		</view>


		<!-- 流程 -->
		<view class="detail-processN boxS">
			<view class="process-title">
				<text class="font30">流程</text>
			</view>
			<view class="process-list">
				<block v-for="(iPrev,index1) in processList" :key="index1">
					<view class="process-item flex-between">
						<view class="process-left flex-left">
							<view class="process-dian"></view>
							<view class="process-text">
								<text class="font28">{{iPrev.process_name}}</text>
								<text class="font24">{{iPrev.examine_member.length}}人协同审批</text>
							</view>
						</view>
						<view class="process-right">
							<view class="flex-right" :style="{'width':iPrev.width,'min-width':'100%'}">
								<block v-for="(item,index2) in iPrev.examine_member" :key="index2">
									<view class="process-people flex-right">
										<view class="process-add">
											+
										</view>
										<view class="people-cont">
											<image :src="!item.cover?'../../static/img/photo.png':item.cover"></image>
											<view class="process-name">
												<text class="font24">{{item.user_name}}</text>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 操作 -->
		<view class="detail-btn boxS flex-between">
			<view class="btn1 font32" hover-class="btns" @click="submitInfo">
				提交
			</view>
		</view>

		<w-picker :visible.sync="shortTermVisible" :startYear=startYear :endYear=endYear :value="nowTime"
			:current="false" fields="minute" @confirm="onConfirm($event,'date1')" @cancel="onCancel"
			:disabled-after="false" ref="shortTerm"></w-picker>

		<w-picker :visible.sync="cityVisible" mode="region" :value="defaultRegion" default-type="value"
			:hide-area="false" @confirm="selectCity($event,'region')" @cancel="onCancel" ref="region"></w-picker>

		<lzLoading :showloading='showLoading'></lzLoading>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				index: '',
				value: '',
				shortTermVisible: false, //时间选择
				cityVisible: false, //城市选择

				result: {
					result: ""
				},
				sTime: '',
				startTime: '',
				endTime: '',
				textInput: '', //事由
				typeid: '', //申请id
				processList: '', //审批列表 
				showLoading: true,
				calTime: '', // 时长
				imgList: [], //图片列表
				defaultRegion: ["重庆市", "市辖区", "渝北区"], //默认城市
				sCity: '',
				startCity: '',
				endCity: '',
				successor_id: '', //接替人id 接替人名字
				successor_name: '', //接替人名字
				name: '',
				personList: [],
				textShiyou: '', // 出差事由
				textRenshu: '', // 出差人数
				textBeizu: '', // 出差备注
				userInfo: {}
			};
		},
		computed: {
			nowTime() {
				return this.$util.formatTime('now', 'Y-M-D h:m')
			},
			// userInfo(){
			// 	return uni.getStorageSync("USERINFO")
			// },
			startYear() {
				return this.$util.formatTime('now', 'Y') * 1 - 2
			},
			endYear() {
				return this.$util.formatTime('now', 'Y') * 1 + 2
			}

		},

		onLoad(options) {
			this.typeid = options.id
		},
		onShow() {
			this.userInfo = uni.getStorageSync("USERINFO")
			if (this.userInfo.ou_id) {
				this.$api.getDeptUser({
					ou_id: this.userInfo.ou_id
				}, true, (res) => {
					this.personList = res.map(ele => {
						return {
							...ele,
							name: `${ele.user_name}(${ele.user_id})`
						}
					})
					console.log(this.personList, 256)
				})
			}
			Promise.all([this.getProcess()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 500)
			})
		},

		methods: {
			bindPickerChange: function(e) {
				this.successor_id = this.personList[e.detail.value].user_id
				this.successor_name = this.personList[e.detail.value].user_name
				this.name = this.personList[e.detail.value].name
			},
			//表单提交
			submitInfo() {
				console.log(this.textInput)
				if (this.startTime == '') {
					uni.showToast({
						title: "请选择开始时间",
						icon: "none"
					})
					return
				}
				if (this.endTime == '') {
					uni.showToast({
						title: "请选择结束时间",
						icon: "none"
					})
					return
				}
				if (this.textShiyou == '') {
					uni.showToast({
						title: "请输入出差事由",
						icon: "none"
					})
					return
				}
				if (this.start_address == '') {
					uni.showToast({
						title: "请选择出发城市",
						icon: "none"
					})
					return
				}
				if (this.end_address == '') {
					uni.showToast({
						title: "请选择目的城市",
						icon: "none"
					})
					return
				}
				// if(this.number == '')
				// {
				// 	uni.showToast({
				// 		title: "请输入同性人姓名",
				// 		icon: "none"
				// 	})
				// 	return
				// }
				// if(this.tolerance_remarks == '')
				// {
				// 	uni.showToast({
				// 		title: "请输入公差备注",
				// 		icon: "none"
				// 	})
				// 	return
				// }

				uni.showLoading({
					title: "提交中"
				})
				this.$api.uploadFile(this.imgList, (resoult) => {
					//表单提交
					this.$api.postSbumitInfo({
						start_time: this.startTime,
						end_time: this.endTime,
						approve_type_id: this.typeid,
						reason: this.textShiyou,
						image: JSON.stringify(resoult),
						start_address: this.startCity,
						end_address: this.endCity,
						number: this.textRenshu,
						tolerance_remarks: this.textBeizu,
						successor_id: this.successor_id,
						successor_name: this.successor_name,
					}, true, (res) => {
						uni.showToast({
							title: '提交成功',
						})
						let sett = setTimeout(() => {
							uni.navigateBack()
							clearTimeout(sett)
						}, 1000)
					})
					uni.hideLoading()
				})

				// 
			},

			//获取审批流程
			getProcess() {
				return new Promise((resolve, reject) => {
					this.$api.getProcess({
						flow_id: this.typeid
					}, true, (res) => {
						for (let i in res.process) {
							res.process[i].width = (res.process[i].examine_member.length * 1 * 160 - 100) +
								'rpx'
						}
						this.processList = res.process
						resolve("success")
					})
				})
			},

			//文字输入
			inputText(e) {
				console.log(e.currentTarget.dataset.type)
				if (e.currentTarget.dataset.type == 'shiyou') {
					this.textShiyou = e.detail.value
				}
				if (e.currentTarget.dataset.type == 'renshu') {
					this.textRenshu = e.detail.value
				}
				if (e.currentTarget.dataset.type == 'beizu') {
					this.textBeizu = e.detail.value
				}
			},
			//图片上传成功
			select(res) {
				this.imgList.push(...res.tempFilePaths)

			},
			//移除图片
			deletes(res) {
				this.imgList.splice(res.tempFilePath, 1)
			},
			//图片上传进度
			progress(e) {
				console.log('上传进度', e)
			},
			//打开时间选择
			openTime(val) {
				this.shortTermVisible = true
				this.sTime = val
			},
			//打开城市选择
			openCity(val) {
				this.cityVisible = true
				this.sCity = val
			},

			onConfirm(res, type) {
				this.result = res;
				console.log(res)
				if (this.sTime == 'start') {
					this.startTime = res.result
				} else {
					this.endTime = res.result
				}
				this.calculationTime()
			},
			//城市选择
			selectCity(res, type) {
				this.result = res;
				console.log(res)
				if (this.sCity == 'start') {
					this.startCity = res.obj.province.label + '-' + res.obj.city.label + '-' + res.obj.city.label
				} else {
					this.endCity = res.obj.province.label + '-' + res.obj.city.label + '-' + res.obj.city.label
				}
			},
			onCancel() {

			},

			// 时间计算
			calculationTime() {
				if (this.startTime != '' && this.endTime != '') {
					// let stime = new Date(this.startTime).getTime()
					// let etime = new Date(this.endTime).getTime()
					// let cal = Math.round((etime - stime) / (1000 * 60 * 60 * 24))
					// cal>0?this.calTime = cal:this.calTime = ''
					this.$api.getDuration({
						start_time: this.startTime,
						end_time: this.endTime
					}, true, (res) => {
						this.calTime = res.work_day
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		.flex-right {
			image {
				width: 12rpx;
				height: 19rpx;
				margin-left: 20rpx;
			}
		}

		.submitC {
			padding-top: 30rpx;

			.info-default {
				color: red;
				margin-right: 5rpx;
			}

			.submit-info1 {
				background: #fff;
				padding: 15rpx 4%;

				.info1-item {
					padding: 15rpx 0;

					.info1-left {
						font-weight: 500;
						color: #454545;
					}

					.info1-right {
						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
							color: #000000;
						}
					}

				}
			}

			.submit-info2 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;

				.info2-item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					&:last-child {
						border: none;
					}

					.info2-left {
						font-weight: 500;
						color: #454545;
					}

					.info2-right {
						width: 72%;
						color: #ABABAB;

						image {
							width: 12rpx;
							height: 19rpx;
							margin-left: 20rpx;
						}

						input {
							width: 100%;
							text-align: left;
							color: #000;
						}

						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
						}
					}
				}
			}

			.submit-info3 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				padding-bottom: 30rpx;

				.info3-title {
					padding: 30rpx 0;
					font-weight: bold;
					color: #454545;

					text {
						&:last-child {
							font-weight: 500;
							color: #787878;
							margin-left: 15rpx;
						}
					}
				}

				.info3-item {
					width: 140rpx;
					height: 140rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					margin-left: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info3-upload {
					width: 140rpx;
					height: 140rpx;
					background: #FAFAFA;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					text-align: center;

					image {
						margin: auto;
						width: 43rpx;
						height: 43rpx;
					}

					text {
						display: block;
						color: #008AFF;
					}
				}
			}

			.detail-process {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				align-items: flex-start;
				padding-bottom: 150rpx;

				.process-title {
					padding: 30rpx 0;
				}

				.process-item {
					padding-bottom: 80rpx;
					position: relative;

					&:after {
						position: absolute;
						top: 100rpx;
						left: 40rpx;
						content: "";
						width: 3rpx;
						height: 60rpx;
						background: #E6E6E6;
						border-radius: 1rpx;
					}

					&:last-child {
						padding-bottom: 30rpx;

						&:after {
							background: none;
						}
					}

					.item-img {
						width: 88rpx;
						height: 88rpx;
						border-radius: 7rpx;
						margin-right: 30rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						font-weight: bold;
						color: #454545;

						text {
							display: block;
							width: 100%;

							&:last-child {
								font-weight: 500;
								color: #454545;
								margin-top: 10rpx;
							}
						}
					}

					.item-state {
						margin-top: 20rpx;
					}

					.item-right {
						color: #ABABAB;
					}
				}
			}

			.detail-processN {
				margin-top: 30rpx;
				background: #fff;

				align-items: flex-start;
				padding-bottom: 170rpx;

				.process-title {
					padding: 30rpx 4%;
					font-weight: bold;
					color: #454545;
				}

				.process-item {
					padding: 30rpx 4%;
					position: relative;
					border-bottom: 1rpx solid #eee;

					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008AFF;
					}

					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008AFF;
					}

					&:first-child {
						padding-top: 0;

						&:before {
							display: none;
						}
					}

					&:last-child {
						border-bottom: none;
						padding-bottom: 0;

						&:after {
							display: none;
						}
					}

					.process-left {
						width: 30%;
						color: #454545;

						.process-dian {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #008AFF;
							margin-right: 25rpx;
						}

						.process-text {
							text {
								display: block;

								&:last-child {
									color: #454545;
									margin-top: 7rpx;
								}
							}
						}
					}

					.process-right {
						width: 70%;
						overflow-x: scroll;
						overflow-y: hidden;
						text-align: right;

						image {
							width: 88rpx;
							height: 88rpx;
							border-radius: 10rpx;
						}

						.process-name {
							line-height: 25rpx;
							text-align: center;
							color: #454545;
							margin-top: -5rpx;
						}

						.process-add {
							font-size: 40rpx;
							font-weight: blod;
							margin-top: -35rpx;
							padding: 0 15rpx;
							color: #454545;
						}

						.process-people {
							&:first-child {
								.process-add {
									display: none;
								}
							}
						}
					}
				}
			}

			.detail-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 92%;
				padding: 30rpx 4%;
				z-index: 100;
				background: #fff;

				.btn1 {
					width: 100%;
					background: #008AFF;
					border-radius: 44rpx;
					text-align: center;
					font-weight: bold;
					color: #FFFFFF;
					padding: 20rpx 0;
				}
			}
		}
	}
</style>
